<template>
  <el-dialog title="修改用户密码" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false" @close="close">
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="用户名称：" prop="pass">{{ userName }}</el-form-item>

      <el-form-item label="新密码：" prop="pass">
        <el-input v-model="form.pass" :type="inputType1" placeholder="请输入新密码">
          <i slot="suffix" class="el-input__icon el-icon-view" @click="changeType1('hide')" />
        </el-input>
      </el-form-item>

      <el-form-item label="确认新密码：" prop="checkPass">
        <el-input v-model="form.checkPass" :type="inputType2" placeholder="请再次输入新密码">
          <i slot="suffix" class="el-input__icon el-icon-view" @click="changeType2('hide')" />
        </el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" round @click="hide()">取 消</el-button>
      <el-button size="small" round type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { resetKdUserPw } from '@/api/user'
import { validateLoginPw } from '@/utils/validate.js'

export default {
  props: {},
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!validateLoginPw(value)) {
        callback(new Error('长度为6~12个字符,支持数字,大小写字母'))
      } else if (this.form.checkPass !== '') {
        this.$refs.form.validateField('checkPass')
        callback()
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.form.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      loading: false,
      dialogVisible: false,
      userId: null,
      userName: null,
      inputType1: 'password',
      inputType2: 'password',
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }]
      },
      form: {
        pass: '',
        checkPass: ''
      }
    }
  },
  methods: {
    changeType1() {
      this.inputType1 = this.inputType1 === '' ? 'password' : ''
    },
    changeType2() {
      this.inputType2 = this.inputType2 === '' ? 'password' : ''
    },

    open(userName, userId) {
      this.userName = userName
      this.userId = userId
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
      this.inputType1 = 'password'
      this.inputType2 = 'password'
      this.$refs.form.resetFields()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    handleSubmit() {
      this.$refs.form.validateField('checkPass')
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          resetKdUserPw({ id: this.userId, password: this.form.pass })
            .then(res => {
              this.loading = false
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000,
                  offset: 40
                })
                // 成功重置表单
                this.$refs.form.resetFields()
                this.resolve && this.resolve()
                this.hide()
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(error => {
              this.$message.error(error)
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
